<template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft" id="navBar">
        </van-nav-bar>
        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">
            <view class="tabTop">
                <view class="title"> {{navBarTitle}} <img
                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/questionIcon.png"
                        alt="" style="width: 44rpx; height: 44rpx;margin-left: 24rpx;">  </view>
                <view class="mysteryBoxProgress">
                    <view class="blindBoxBg">
                        <img :src="blindBoxInfo.imageUrl?blindBoxInfo.imageUrl:defaultImageUrl" alt="" style="width:331rpx; height:auto" mode="widthFix" />
                    </view>
                    <view class="middle">你还有{{blindBoxInfo.unopenedBlindBoxCount}}个盲盒可以领取</view>
                    <view class="openBlindBox"><van-button type="primary" @click="openMysteryBox" :disabled="blindBoxInfo.unopenedBlindBoxCount==0">打开盲盒</van-button></view>
                    <view class="myGift">
                        <template v-if="showGiftList">
                            <!-- 当前盲盒对应的所有可能得礼品 -->
                            <view @tap="toCheckedGiftList">礼品列表</view>
                        </template>
                        <view v-if="showGiftList && showMyGift">|</view>
                        <!-- 当前盲盒对应的  我已经获取的礼品 -->
                        <view @click="toMyGiftList" v-if="showMyGift">我的礼品</view>
                    </view>
                </view>

            </view>

        </scroll-view>
        <van-overlay :show="show" @click="onClickHide">
            <view class="wrapper">
                <view class="wrapperCon">
                    <template v-if="isWin">
                        <!-- 打开盲盒--积分奖励 -->
                        <view class="block" v-if="blindBoxContent.winningType == 1">
                            <view class="jinbiBg">
                                <img :src="blindBoxContent.integralPic" alt="">
                            </view>
                            <view class="giftDetail">
                                <view class="giftDetailTop">恭喜你获得</view>
                                <view class="giftDetailMiddle">{{ blindBoxContent.winningIntegralNumber }}积分</view>
                                <view class="giftDetailBottom">{{ blindBoxContent.integralWarmTips }}</view>
                                <van-button type="default" @click="checkMyGiftInfo()">查看我的礼品</van-button>
                            </view>
                        </view>
                        <!-- 打开盲盒--其他奖励 优惠券 -->
                        <view class="block" v-if="blindBoxContent.winningType == 2">
                            <view class="jinbiBg">
                                <img :src="blindBoxContent.couponPic" alt="">
                            </view>
                            <view class="giftDetail">
                                <view class="giftDetailTop">恭喜你获得</view>
                                <view class="giftDetailMiddle">{{ blindBoxContent.couponName }}</view>
                                <!-- <view class="giftDetailBottom">{{blindBoxContent.nonWinningWarmTips}}</view> -->
                                <van-button type="default" @click="checkMyGiftInfo()">查看我的礼品</van-button>
                            </view>
                        </view>
                        <!-- 打开盲盒--其他奖励 谢谢 -->
                        <view class="block" v-if="blindBoxContent.winningType == 3">
                            <view class="jinbiBg"> <img :src="blindBoxContent.nonWinningPic" alt=""> </view>
                            <view class="giftDetail">
                                <!-- <view class="giftDetailTop">恭喜你获得</view> -->
                                <view class="giftDetailMiddle">{{ blindBoxContent.nonWinningName }}</view>
                                <view class="giftDetailBottom" v-if="blindBoxContent.nonWinningWarmTips">{{ blindBoxContent.nonWinningWarmTips }}</view>
                                <van-button type="primary" @click="iKonw()">知道了</van-button>
                            </view>
                        </view>
                    </template>
                    <template v-else>
                        <!-- 打开盲盒--其他奖励 谢谢 -->
                        <view class="block">
                            <view class="jinbiBg"> <img :src="blindBoxContent.nonWinningPic" alt=""> </view>
                            <view class="giftDetail">
                                <!-- <view class="giftDetailTop">恭喜你获得</view> -->
                                <view class="giftDetailMiddle">{{blindBoxContent.nonWinningName}}</view>
                                <view class="giftDetailBottom" v-if="blindBoxContent.nonWinningWarmTips">{{ blindBoxContent.nonWinningWarmTips }}</view>
                                <van-button type="primary" @click="iKonw()">知道了</van-button>
                            </view>
                        </view>
                    </template>
                    <view class="cross">
                        <van-icon name="close" size="30" style="color: #D4D4D4;" @click="onClickHide" />
                    </view>
                </view>
            </view>
        </van-overlay>
        <van-dialog id="van-dialog" confirm-button-color='#ff6203' />

    </view>
</template>

<script>
import Dialog from '@/wxcomponents/vant/dialog/dialog'

import {getUnopenedBlindBoxByTaskIdApi,openBlindBoxByIdApi,blindBoxContentApi} from '@/api/checkedInTask'
export default {
    components: {

    },
    data() {
        return {
            navBarTitle: '7天签到盲盒',
            scrolling:false,
            defaultImageUrl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/jinbiNoBg.png',
            params:{}, //接受从路由传过来的参数
            taskManagementId:45,
            receiptsRecordId:undefined, //'174767799183478784'
            blindBoxReceiptsRecordId:undefined,  //下一个页面要用'174767799183478784'
            blindBoxId:0, //盲盒id
            prizeType:1, // 1 积分  2 优惠券  3 谢谢
            recordList:[
                {
                    date:'2024/12/20',
                    status:'已签到',
                },
                {
                    date:'2024/12/20',
                    status:'已签到',
                },
                {
                    date:'2024/12/20',
                    status:'已签到',
                },
            ],
            giftList:[],
            num:7,
            show:false,
            blindBoxInfo:null,
            blindBoxContent:{ },
            winningType:null, // 1 积分  2 盲盒  3 谢谢
            showGiftList:false, // 显示礼物列表
            showMyGift:false, // 显示我的礼品列表
            isWin:false, // 是否中奖  true 中奖  false 未中奖   谢谢惠顾
        }
    },
    onLoad(data) {
      if(data && data.params){
        this.params = JSON.parse(decodeURIComponent(data.params))
        console.log(JSON.parse(decodeURIComponent(data.params)))
        console.log('params', this.params)
        this.taskManagementId = this.params.taskManagementId || 45
        this.receiptsRecordId = this.params.receiptsRecordId || '174767799183478784'
      }
    },
    onReady(){

    },
    onShow(){
        this.getUnopenedBlindBoxByTaskId()
    },
    methods: {
        // 滑动
        scrollPage(e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft () {
            uni.navigateBack()
        },
        // 开盲盒  如果有多个未开盲盒  可以连续点击打开 （onClickHide关闭后  打开第二个）
        async openMysteryBox(){
            const res = await openBlindBoxByIdApi({blindBoxReceiptsRecordId:this.receiptsRecordId})
            if(res.code==200){
                this.blindBox = res.data || {}
                this.blindBoxReceiptsRecordId = res.data?.blindBoxReceiptsRecordId || undefined  //下一个页面要用
                this.prizeType = res.data?.prizeType || 1  // 1 积分  2 优惠券  3 谢谢
                this.isWin = res.data?.win || false
                // if(this.isWin && res.data?.prizeType == 3){
                //     this.show = false
                //     Dialog.confirm({
                //         // title: '标题', // 可选
                //         message: '很遗憾，本次没中奖，下次继续努力吧', // 必填
                //         confirmButtonText: '确定', // 可选
                //         // cancelButtonText: '取消', // 可选
                //         confirmButtonColor: '#ff6203', // 确认按钮颜色
                //         theme: 'round-button',
                //         // cancelButtonColor: '#888', // 取消按钮颜色
                //         showCancelButton: false, // 是否显示取消按钮
                //         // 其他配置...
                //     }).then(() => {
                //         // 确认回调 - 这里不需要额外操作，Dialog会自动关闭
                //         // 如果您需要执行其他操作，可以在这里添加
                //     }).catch(() => {
                //         // 取消回调 - 这里不会执行，因为showCancelButton为false
                //     });
                // }else{
                    this.show = true
                    blindBoxContentApi({blindBoxReceiptsRecordId:this.blindBoxReceiptsRecordId}).then(res=>{
                        if(res.code==200){
                            this.blindBoxContent = res.data || []
                            this.show = true
                        }
                    })
                // }
              
                // }else{
                //     this.show = false
                //     Dialog.confirm({
                //         // title: '标题', // 可选
                //         message: '很遗憾，本次没中奖，下次继续努力吧', // 必填
                //         confirmButtonText: '确定', // 可选
                //         // cancelButtonText: '取消', // 可选
                //         confirmButtonColor: '#ff6203', // 确认按钮颜色
                //         theme: 'round-button',
                //         // cancelButtonColor: '#888', // 取消按钮颜色
                //         showCancelButton: false, // 是否显示取消按钮
                //         // 其他配置...
                //     }).then(() => {
                //         // 确认回调 - 这里不需要额外操作，Dialog会自动关闭
                //         // 如果您需要执行其他操作，可以在这里添加
                //     }).catch(() => {
                //         // 取消回调 - 这里不会执行，因为showCancelButton为false
                //     });
                // }


            }
        },
        // 隐藏
        onClickHide(){
            this.show=false
            this.getUnopenedBlindBoxByTaskId()
        },
        // 知道了  关闭弹窗
        iKonw(){
            this.show = false
            this.getUnopenedBlindBoxByTaskId()
        },


        // 盲盒设置的所有礼品
        toCheckedGiftList(){
            const params = {
                blindBoxId: this.blindBoxId,
                receiptsRecordId: this.receiptsRecordId,
                taskManagementId: this.taskManagementId,
                blindBoxReceiptsRecordId:this.blindBoxReceiptsRecordId,
            }
            uni.navigateTo({
                url:'/pages/blindBox/blindBoxGiftList?params=' +
                    encodeURIComponent(JSON.stringify(params))
            })
        },
        // 我的礼品列表
        toMyGiftList(){
            const myGiftsParams = {
                blindBoxId: this.blindBoxId,
                receiptsRecordId: this.receiptsRecordId,
                blindBoxReceiptsRecordId:this.blindBoxReceiptsRecordId,
                taskManagementId: this.taskManagementId
            }
            uni.navigateTo({
                url:'/pages/blindBox/myAllGiftList?params=' +
                    encodeURIComponent(JSON.stringify(myGiftsParams))
            })
        },

        // 弹窗中 查看我的礼品详情
        checkMyGiftInfo(){
            // debugger
            console.log(this.blindBoxContent.winningType)
            uni.navigateTo({
                url:'/pages/blindBox/myGiftInfo?params=' +
                    encodeURIComponent(JSON.stringify({winningType:this.prizeType,blindBoxReceiptsRecordId:this.blindBoxReceiptsRecordId}))
            })
        },
        // 获取未开盲盒信息
        async getUnopenedBlindBoxByTaskId(){
            const res= await getUnopenedBlindBoxByTaskIdApi({taskManagementId:this.taskManagementId})
            if(res.code==200){
                this.blindBoxInfo= res?.data || {}
                this.navBarTitle = res.data?.name || '七天签到盲盒'
                this.receiptsRecordId = res.data?.receiptsRecordId || undefined
                this.showMyGift = res.data?.showMyGift || false
                this.showGiftList = res.data?.showGiftList || false
                this.blindBoxId = res.data?.blindBoxId || 0 //盲盒id
            }else{
                this.navBarTitle = res.data?.name || '七天签到盲盒'
                this.blindBoxInfo={
                    unopenedBlindBoxCount:0,
                }
            }
        }
       
    }
}
</script>

<style lang="scss" scoped>
::v-deep #navBar .van-nav-bar {
    background-color: transparent !important;
}

.content {
    background-color: #f9f9f9;
    display: flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}
.tabTop{
    padding:0rpx 48rpx;
}
.title{
    font-size: 60rpx;
    line-height: 60rpx;
    text-align: left;
    color: #111111;
}
.checkedInDay{
    font-size: 28rpx;
    color: #111111;
    line-height: 28rpx;
    margin-top: 43rpx;
}
.mysteryBoxProgress{
    padding-top: 282rpx;
    padding-bottom: 42rpx;
    text-align: center;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    // align-items: center;
}
.blindBoxBg{
    width: 100%;
    height: 428rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.middle{
    font-size: 26rpx;
    color: #666666;
    line-height: 26rpx;
    margin-bottom: 50rpx;
}
.myGift{
    color: #111111;
    font-size: 32rpx;
    line-height: 32rpx;
    margin-top: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20rpx;
}

// /以下都是弹窗样式

.wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

}
.wrapperCon{
    width: 630rpx;
}
.block{
    // width: 630rpx;
    // // height: 80%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    // align-items: center;
    // justify-content: center;
    padding:0 48rpx;
}
.jinbiBg{
    padding-top: 174rpx;
    padding-bottom: 174rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    img{
        width: 322rpx;
        height: 322rpx;
    }
}
.giftDetail{
    z-index: 1;
    // margin-top: 80rpx;
    // padding: 0px 48rpx;
    .giftDetailTop{
        font-size: 32rpx;
        text-align: left;
        color: #666666;
        line-height: 32rpx;
    }
    .giftDetailMiddle{
        font-size: 48rpx;
        text-align: left;
        color: #111111;
        line-height: 48rpx;
        margin: 42rpx 0rpx;
    }
    .giftDetailBottom{
        font-size: 22rpx;
        text-align: left;
        color: #666666;
        line-height: 22rpx;
    }
}
.cross{
    width: 100%;
    text-align: center;
    margin-top: 67rpx;
}
::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep #navBar .van-icon {
    color: #242629 !important;
}

// 滚动条 去掉自带的文字提示  
::v-deep .van-progress__pivot {
	display: none;
}

::v-deep .van-button--primary {
    width: 100%;
    height: 86rpx;
    border-radius: 38rpx;
    font-size: 28rpx;
    background: #FF6203 !important;
    border: 1px solid #ff6203 !important;
}

::v-deep .van-button--default {
    margin-top: 50rpx;
    margin-bottom: 50rpx;
    // width: 670rpx;
    width: 100%;
    height: 76rpx;
    border-radius: 48rpx;
    background: transparent !important;
    border: 1px solid #111111 !important;
    color: #111111 !important;
}
::v-deep .giftDetail .van-button--primary {
    margin-top: 50rpx;
    margin-bottom: 50rpx;
    width: 100%;
    height: 76rpx;
    border-radius: 38rpx;
    font-size: 28rpx;
    background: #FF6203 !important;
    border: 1px solid #ff6203 !important;
}

</style>
